<template>
  <n-layout-footer :style="{ height: `45px`, background: '#2c3e50' }">
    <n-space justify="end" style="margin: 0px">
      <n-select
        v-model:value="typeSelected"
        filterable
        tag
        :options="typeOptions"
      />
      <n-button
        type="primary"
        ghost
        :loading="loading"
        style="margin-right: 5px"
        @click="onProduceClicked"
        >生成</n-button
      >
    </n-space>
  </n-layout-footer>
</template>

<script>
import IPC from "../background/ipc";
import { ref, onMounted, watch } from "vue";
import { useDialog } from "naive-ui";
import useTemplateRepositories from "../composables/useTemplateRepositories";
import { computed } from "vue";
import { useStore } from "vuex";
export default {
  name: "VGFooter",

  props: {},

  setup() {
    const loadingRef = ref(false);

    const dialog = useDialog();

    const store = useStore();

    const typeSelected = ref(null);

    const typeOptions = ref([]);

    const current = computed(() => store.state.current);

    const tables = computed(() => store.state.tables);

    //const bottomBatHeight = ref(Constants.BOTTOM_BAR_HEIGHT);
    const { typeList, getTypelist } = useTemplateRepositories(
      current.value.id,
      "0"
    );

    const onProduceClicked = async function () {
      console.log("---const onProduceClicked = function ()---");
      console.log(tables.value);

      if (tables.value.ids.length <= 0) {
        dialog.error({
          title: "错误",
          content: "请选择要生成的表",
          positiveText: "确定",
        });
      } else {
        loadingRef.value = true;

        let result = await IPC.invoke("template.produce", {
          linkId: current.value.id,
          tableIds: tables.value.ids,
          type: typeSelected.value,
        });

        dialog.success({
          title: "成功",
          content: `生成位置：${result.data}`,
          positiveText: "确定",
          onPositiveClick: () => {
            loadingRef.value = false;
          },
        });
      }
    };

    onMounted(() => getTypelist());

    watch(
      typeList,
      () => {
        typeOptions.value = typeList.value.map((c) => {
          return {
            label: c,
            value: c,
          };
        });
        typeSelected.value = typeOptions.value[0].value;
      },
      { deep: true }
    );

    return {
      loading: loadingRef,
      typeSelected,
      typeOptions,
      typeList,
      getTypelist,
      onProduceClicked,
      //bottomBatHeight,
    };
  },

  methods: {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.vgfooter {
  background: #2c3e50;
}
</style>
